<template>
    <a-card :bordered="false">
        <!-- table区域-begin -->
        <a-row :gutter="10">
          <a-col :md="12" :sm="24">
            <!-- <a-card :bordered="false"> -->
              <div >
                <a-form @keyup.enter.native="searchQuery">
                  <a-row :gutter="12">
                    <a-col :md="12" :sm="12">
                      <a-form-item label="工作组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input placeholder="请输入工作组名称" v-model="queryParam.groupName"></a-input>
                      </a-form-item>
                    </a-col>
                    <a-col :md="12" :sm="12">
                      <a-form-item>
                        <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
                        <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
                <vxe-grid
                  id="planGroupList"
                  keep-source
                  ref="vxeTable"
                  v-bind="gridOptions"
                  :row-config="{keyField:'id',isCurrent:true}"
                  :radio-config="{trigger:'row'}"
                  @current-change="onCurrentChange"
                >
              </vxe-grid>
            <!-- </a-card> -->
          </a-col>
          <a-col :md="12" :sm="24">
            <a-tabs default-active-key="1" style="margin-top:4px;">
                <a-tab-pane key="1" tab="已关联用户">
                    <PlanGroupWithUserList :groupId="currentRow.id" refs="PlanGroupWithUserList" />
                </a-tab-pane>
            </a-tabs>
          </a-col>
        </a-row>
    </a-card>
  </template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import PlanGroupWithUserList from './modules/PlanGroupWithUserList'
import { getAction } from '@/services/manage'
export default {
  name: 'PlanGroupList',
  components: {
    PlanGroupWithUserList
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'seq', width: 40 },
        {
          title: '工作组名称',
          align: 'center',
          field: 'groupName',
          width: 200
        },
        {
          title: '描述',
          align: 'center',
          field: 'groupDesc'
        }
      ],
      url: {
        list: '/plan/group/v1/page'
      },
      currentRow: {},
      dataSource: [],
      pagerConfig: {
        layouts: ['PrevPage', 'Number', 'NextPage', 'FullJump', 'PageCount', 'Total']
      }
    }
  },
  computed: {
    getToolbarConfig() {
      return null
    }
  },
  methods: {
    async loadTableData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      const res = await getAction(this.url.list, params)
      this.loading = false
      if (res.success) {
        this.dataSource = res.result.content
        this.setCurrentData()
      }
      return res
    },
    setCurrentData() {
      this.$refs.vxeTable.clearCurrentRow()
      let currentRow
      if (Object.keys(this.currentRow).length > 0) {
        this.dataSource.forEach(item => {
          if (this.currentRow.id === item.id) {
            currentRow = JSON.parse(JSON.stringify(item))
          }
        })
      }
      !currentRow ? currentRow = this.dataSource[0] || {} : ''
      this.currentRow = Object.assign({}, currentRow)
      this.$refs.vxeTable.setCurrentRow(currentRow)
    },
    onCurrentChange({ row }) {
      this.currentRow = row
    }
  }
}
</script>

